<template>
  <div class="manager">
    <div class="manager_title">

      <!-- 原生input  是:value    lay-inp是modelValue  -->
      <div v-if="titleOption.name1Show!='0'"> <span>{{titleOption.name1}}：</span>

        <lay-input v-if="!titleOption.name1Type&&titleOption.name1Type!='time'" size="sm" placeholder="请输入" @keydown.enter="search_btn" :modelValue="modelValue" @input="search1_inp"></lay-input>
        <lay-date-picker v-else simple type="date" size="sm" placeholder="请选择" :modelValue="modelValue" @change="search_btn($event,'time1')"></lay-date-picker>

      </div>
      <div v-if="titleOption.name2"> <span>{{titleOption.name2}}：</span>

        <lay-input v-if="!titleOption.name2Type&&titleOption.name2Type!='time'" size="sm" placeholder="请输入" @keydown.enter="search_btn" :modelValue="search2" @input="search2_inp"></lay-input>
        <!-- <lay-date-picker v-else simple type="date" size="sm" placeholder="请选择" :modelValue="search2" @change="search_btn($event,'time')"></lay-date-picker> -->
        <!-- <el-date-picker v-else v-model="search2Inpu" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px;"
          :disabled-date="titleOption.name2DateNone?undefined:disabledDate" /> -->

        <el-date-picker v-else v-model="search2Inpu" type="month" placeholder="请选择" @change="search_btn($event,'time')" :format="'YYYY-MM'" value-format="YYYY-MM"
          :disabled-date="  titleOption?.name2disables=='noThisMonth'?disDateNoThisMonth:disabledDate" />
      </div>
      <div>
        <lay-button class="btn-search" size="sm" type="normal" @click="search_btn"> {{titleOption.btn1}}</lay-button>
        <lay-button class="btn-resert" size="sm" @click="resert">{{titleOption.btn2}}</lay-button>
        <lay-button class="btn-resert" size="sm" @click="export_table" v-if="titleOption.btn3"> 导出</lay-button>
      </div>
    </div>

    <div class="manager_btn">
      <div v-for="item in tableTopBtn" :key="item.id" class="btn_list">
        <lay-button :class="[item.clickType=='add'?'btn-add':'btn-add']" size="sm" class="btn-red" :type="item.type" @click="tableTopClick(item)" v-permissions="item.btnPer"> {{ item.name }}</lay-button>
      </div>

    </div>

    <div class="manager_table">
      <lay-table :resize="true" :height="'100%'" :columns="columns" :data-source="dataSource">

        <!-- 任务发布toolbar  -->
        <template v-slot:toolbar v-if="istoolbar&& istoolbar.status">
          <lay-tab type="brief" v-model="current2Task" @change="task_tab_change">
            <lay-tab-item title="日评吸" id="0">
            </lay-tab-item>
            <lay-tab-item title="周评吸" id="1">
            </lay-tab-item>
          </lay-tab>
        </template>

        <template v-slot:operator="{ row }">

          <div v-for="item in tableRBtn" :key="item.id" style="margin: 0 6px;">
            <lay-button size="xs" :type="item.type" v-permissions="item.btnPer" @click="tableRClick(item,row)"> {{ item.name }}</lay-button>
          </div>

        </template>
        <template #state="{ row }">
          <lay-switch v-model="row.switch_state" onswitch-text="开启" unswitch-text="关闭"></lay-switch>
        </template>

        <!--  评吸会议  评吸状态 -->
        <!-- <template #meetingStatus="{ row }">
          <span
            :style="{color:row.meetingStatus==0?'':row.meetingStatus==1?'red':row.meetingStatus==2?'#48b078':''}">{{ row.meetingStatus==0?'未开始':row.meetingStatus==1?'进行中':row.meetingStatus==2?'已完成':'-' }}</span>
        </template> -->
        <!-- 评吸会议   操作 -->
        <!-- <template v-slot:mettoperator="{ row }">
          <div v-for="item in tableRBtn" :key="item.id">
            <el-button size="small" link :type="item.type" @click="tableRClick(item,row)" v-if="nowMenuBtnArr.includes(item.name)" style="margin-right: 8px;"> {{ item.name }}</el-button>
          </div>
          <el-button size="small" link :style="{color:row.meetingStatus==0?'':row.meetingStatus==1?'red':row.meetingStatus==2?'#48b078':''}">
            {{ row.meetingStatus==0?'开始任务':row.meetingStatus==1?'继续任务':row.meetingStatus==2?'查看任务':'-' }}
          </el-button>
        </template> -->

        <!-- 任务发布 -->
        <template #taskoperator="{ row }">
          <!-- disabled -->

          <div v-for="item in tableRBtn" :key="item.id" v-permissions="item.btnPer">
            <lay-button size="xs" :type="item.type" style="margin-right: 8px;" @click="tableRClick(item,row)" v-if="showBtn(item,row)">{{ item.name }}</lay-button>
            <!-- <lay-button size="xs" link :type="item.type"
            @click="tableRClick(item,row)" v-if="showAndHide(item, row)"
            style="margin-right: 8px;"> {{ item.name }}</lay-button> -->
          </div>
        </template>

        <!-- 任务类型 -->
        <template #taskType="{ row }">
          {{ row.type==0?'日评吸':row.type==1?'周评吸':'' }}
        </template>

        <!-- 评吸状态 -->
        <template #taskstatus="{ row }">
          {{ row.status==''?'':row.status==0?'保存':row.status==1?'发布':'' }}
        </template>

        <!-- 津贴确认操作按钮 -->
        <template #allowanceoperator="{ row }">
          <!-- <el-button link @click="tableRClick({type:'view'},row)">查看</el-button> -->
          <el-tag type="success" v-if="row.status=='1'"> 已确认 </el-tag>
          <!-- <el-button v-else link :type=" row.status =='1'?'primary' :'danger' " @click="tableRClick({type:'enter'},row)">{{'签收确认' }}</el-button> -->
          <lay-button v-else size="xs" type="normal" @click="tableRClick({type:'enter'},row)">签收确认</lay-button>
        </template>

      </lay-table>
      <!-- <Pagination :currentPage="currentPage" :limit="limit" :total="total" @page_change="page_change"></Pagination> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
const store = useCounterStore();
const { nowMenuBtnArr } = storeToRefs(store);

const props = defineProps(["titleOption", "tableTopBtn", "columns", "dataSource", "tableRBtn", "modelValue", "search2", "istoolbar"]);
const emit = defineEmits(["tableRClick", "tableTopClick", "update:modelValue", "update:search2", "search_btn", "resert", "task_tab_change", "export_table"]);

// 禁止选择的逻辑
const disabledDate = (time) => {
  let flag = false;
  try {
    // 获取当前日期
    const now = new Date();
    // 清除小时等信息，以便只比较年月日
    now.setHours(0, 0, 0, 0);

    // 清除参数时间的日以下的部分
    const incomingDate = new Date(time);
    incomingDate.setHours(0, 0, 0, 0);

    flag = incomingDate > now;
  } catch (err) {
    console.log(err);
  }

  // 如果参数时间大于等于当前时间，则禁止选择
  return flag;
};

const disDateNoThisMonth = (time) => {
  let flag = true;
  try {
    // console.log(time);

    // 获取当前日期
    const now = new Date();
    // 将当前日期的日设置为1日，并且清除小时等信息，以便仅比较年月
    now.setDate(1);
    now.setHours(0, 0, 0, 0);

    // 同理，清除参数时间的日以下的部分
    const incomingDate = new Date(time);
    incomingDate.setDate(1);
    incomingDate.setHours(0, 0, 0, 0);

    flag = incomingDate >= now;

    // 如果参数时间大于等于当前时间，则禁止选择
  } catch (err) {
    console.log(err);
  }

  return flag;
};

// 任务发布 tab
const current2Task = ref("0");
const task_tab_change = (e) => {
  console.log(e);
  emit("task_tab_change", e);
};

const tableTopClick = (item: string[]) => {
  emit("tableTopClick", item);
};

// 表格操作按钮
const tableRClick = (item: string[], row: string[]) => {
  emit("tableRClick", item, row);
};

const search1_inp = (e) => {
  // console.log(e);

  emit("update:modelValue", e);
};
const search2_inp = (e) => {
  // console.log(e);

  emit("update:search2", e);
};

// 查询
const search_btn = (e, type) => {
  console.log(e, type);
  if (type == "time") {
    emit("update:search2", e);
  }
  if (type == "time1") {
    emit("update:modelValue", e);
  }

  emit("search_btn");
};

/**时间 */
let search2Inpu = computed({
  get() {
    return props.search2;
  },
  set(val) {
    emit("update:search2", val);
    emit("search_btn");
  },
});

// 重置
const resert = () => {
  emit("resert");
};

function export_table() {
  emit("export_table");
}

/**
 *
 * @param row 行数据传参
 * @param item 操作按钮的传参
 */
function showAndHide(item: any, row: any) {
  let disabled = item.disabled;
  if (!disabled) {
    return true;
  }
  let loop = true;
  try {
    Object.keys(disabled).forEach((key: string) => {
      // console.log(disabled[key]);

      if (disabled[key].includes(row[key])) {
        loop = false;
        throw new Error("需要隐藏");
      }
    });
  } catch (error) {}
  return loop;
}

function showBtn(item, row) {
  // console.log(item, row);
  if (row.status == 0) {
    if (item.clickType !== "detail" && item.clickType !== "export") {
      return true;
    }
  } else {
    if (item.clickType == "view" || item.clickType == "detail" || item.clickType == "export") {
      return true;
    }
  }
}
</script>

<style scoped lang="scss">
.manager {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  &_title {
    display: flex;
    justify-content: space-between;
    > div {
      display: flex;
      align-items: center;
      margin-right: 35px;
      span {
        // width: 100px;
        white-space: nowrap;
        text-align: right;
      }
      .layui-input {
        width: 300px;
      }
    }
  }

  &_btn {
    // margin-right: 8px;
    margin-top: 20px;
  }
  &_table {
    margin-top: 20px;
  }
}

:deep(.layui-tab) {
  margin: 0 !important;
  .layui-tab-content {
    display: none;
  }
}
.manager_btn {
  display: flex;
  align-items: center;
  .btn_list {
    width: max-content;
    margin-right: 20px;
  }
}
</style>